import './security.scss'
import { Modal, Button, Input, notification, QRCode, Space, theme, message } from 'antd';
import { UserOutlined } from '@ant-design/icons';
import { useState } from 'react'
import { changepassword, changePhoneCode, changePhone } from '../../api/user';
import { connect } from 'react-redux';
const { useToken } = theme;
const App = ({ adminInfo }) => {
    const [isModalOpen, setIsModalOpen] = useState(false);
    const [messageApi, contextHolder2] = message.useMessage();
    const [phone, setPhone] = useState('')
    const [message2, setMessage2] = useState('')
    const [password, setPassword] = useState('')
    const [respassword, setResPassword] = useState('')
    const [useIf, setUseIf] = useState(false)
    const [weixin, setWeixin] = useState(false)
    const [phoneText, setPhoneText] = useState(adminInfo.phone)
    const { token } = useToken();
    const [phonecontent, setPhoneContent] = useState(adminInfo.phone.slice(0, 3) + '****' + adminInfo.phone.slice(7, 11))
    const showModal = (data) => {
        setUseIf(data)
        setIsModalOpen(true);
    };
    const handleOk = () => {
        if (password === '') {
            return messageApi.open({
                type: 'warning',
                content: '密码不可为空',
            });
        }
        if (!(password === respassword)) {
            return messageApi.open({
                type: 'warning',
                content: '密码不一样',
            });
        }
        changepassword({
            password,
            username: adminInfo.username
        }).then(res => {
            if (res.data.code !== '200') return messageApi.open({
                type: 'warning',
                content: '修改失败',
            });
            messageApi.open({
                type: 'success',
                content: '修改成功',
            });
            setIsModalOpen(false);
        })
    };
    const handleOk2 = () => {
        if (phone === '' || message2 === '') return messageApi.open({
            type: 'warning',
            content: '不可为空',
        });
        changePhone({
            phone,
            code: message2,
            username: adminInfo.username
        }).then(res => {
            if (res.data.code !== '200') return messageApi.open({
                type: 'warning',
                content: '修改失败',
            });
            messageApi.open({
                type: 'success',
                content: '修改成功',
            });
            setPhoneText(phone)
            setIsModalOpen(false);
        })
        // setIsModalOpen(false);
    };
    const handleCancel = () => {
        setIsModalOpen(false);
    };
    const [api, contextHolder] = notification.useNotification();
    const openNotification = () => {
        api.open({
            message: '绑定微信',
            description: <Space>
                <QRCode
                    value="https://ant.design/"
                    color={token.colorInfoText}
                    bgColor={token.colorBgLayout}
                />
            </Space>,
            duration: 0,
            onClose: function () {
                setWeixin(false)
            }
        });
    };
    return (
        <div className="security">
            {contextHolder}
            {contextHolder2}
            <Modal title={useIf ? '修改手机' : "修改密码"} open={isModalOpen} onOk={() => {
                useIf ? handleOk2() : handleOk()
            }} onCancel={handleCancel} cancelText={'取消'} okText={'确认修改'}>
                {
                    !useIf ? (<><div><Input size="large" placeholder="请输入新密码" prefix={<UserOutlined />} value={password} onChange={(e) => {
                        setPassword(e.target.value)
                    }} /></div>
                        <div><Input size="large" placeholder="请再次输入" prefix={<UserOutlined />} value={respassword} onChange={(e) => {
                            setResPassword(e.target.value)
                        }} /></div></>) : (<>
                            <div><Input size="large" placeholder="请输入手机号" prefix={<UserOutlined />} value={phone} onChange={(e) => {
                                setPhone(e.target.value)
                            }} /></div>
                            <div style={{ display: 'flex' }}>
                                <Input size="large" placeholder="请输入验证码" prefix={<UserOutlined />} value={message2} onChange={(e) => {
                                    setMessage2(e.target.value)
                                }} />
                                <Button type="primary" onClick={() => {
                                    if (adminInfo.phone === phone) return messageApi.open({
                                        type: 'warning',
                                        content: '手机号未改变',
                                    });
                                    if (phone === '') return messageApi.open({
                                        type: 'warning',
                                        content: '手机号不可为空',
                                    });
                                    changePhoneCode({ phone }).then(res => {
                                        console.log(res.data);
                                    })
                                }}>获取验证码</Button></div>
                        </>)
                }

            </Modal>

            <div className='security_header'>
                <span>安全中心</span>
            </div>
            <span style={{ color: 'gray', margin: 15 }}>密码设置</span>
            <div className='respassword2'>
                <span>重置密码</span>
                <span style={{ color: 'green' }} onClick={() => {
                    showModal(false)
                }}>修改</span>
            </div>
            <span style={{ color: 'gray', margin: 15 }}>账号绑定（有助于账号丢失后快速找回）</span>
            <div className='resmessage2'>
                <div>
                    <span>修改手机</span>
                    <span>{phonecontent}</span>
                    <span style={{ color: 'green' }} onClick={() => {
                        showModal(true)
                    }}>修改</span>
                </div>
                <div>
                    <span>绑定微信</span>
                    <span>绑定微信,接收上课提醒</span>
                    <span style={{ color: 'green' }} onClick={() => {
                        if (weixin) return
                        setWeixin(true)
                        openNotification()
                    }}>绑定</span>
                </div>
            </div>
        </div>
    )
}
const mapStateToprops = (state) => {
    return {
        adminInfo: state.getIn(['login', 'adminInfo'])
    }
}
const mapDispathToprops = (dispath) => {
    return {
    }
}
export default connect(mapStateToprops, mapDispathToprops)(App)